<template>
  <div id="app" class="bg-yuebai" style="min-height: 100vh;">
    <div style="width: 100vw; min-height: 100%;" v-if="isLogin">
		<router-view ></router-view>
		<div v-if="'' != currentDetailName" class="position-fixed " 
			style="top: 0; width: 100%; height: 100%; z-index: 1000; background-color: rgba(255, 255, 255, 0.5);">
			<Row class="h-100">
				<Col class="h-100" :xs="0" :sm="0" :md="0" :lg="0" :xl="0" :xxl="0">
				</Col>
				<Col class="h-100 p-2" :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
					<div class="shadow-lg rounded animate__animated animate__backInRight bg-white" 
						style="height: 100%; overflow: hidden; overflow-y: auto;" >
						<div class="p-2 d-flex justify-content-between align-items-center border-bottom border-main bg-main">
							<span class="">{{currentDetail.title}}</span>
							<Icon @click="closeDetail" class="pointer" type="md-close" />
						</div>
						<component class="p-4" :params="currentDetail.params" :is="currentDetailName"></component>
					</div>
					
				</Col>
			</Row>
		</div>
	</div>
	<Layout v-if="!isLogin" :class="'bg-danger w-100 h-100 position-fixed'">
		<Login></Login>
	</Layout>
  </div>
</template>
<script>
	import Login from './components/login.vue';

	export default {
		components: {
			Login,
		},
		data() {
			return {
				currentUser: {
				},
				
				currentDetail: {
					title: "",
					params: undefined,
				}
			};
		},
		created: function() {
			this.store.commit("checkLogin");
		},
		methods: {
			closeDetail: function() {
				this.$router.detail.close();
			},
			
			logout: function() {
				this.store.commit("loginOut");
			},
			showdata: function() {
				this.$router.push({
					name: 'dashboard',
				})
			},
	
		},
		computed: {
			isLogin() {
				return this.store.state.isAlreadyLogin;
			},
			current: function() {
				return this.store.state.currentUser;
			},
			currentDetailName: function() {
				
				if (this.store.state.currentDetailName) {
					let currentItem = this.$router.options.detailRouters[this.store.state.currentDetailName];
					if (undefined != currentItem && undefined != currentItem.meta && undefined != currentItem.meta.title) {
						this.currentDetail.title = currentItem.meta.title;
					}
					
					if (undefined != this.store.state.currentDetailParams) {
						this.currentDetail.params = this.store.state.currentDetailParams;
					}
				} else {
					this.currentDetail.title = "";
					this.currentDetail.params = undefined;
				}

				return this.store.state.currentDetailName;
			}
		}
	}

</script>

<style scoped>

	
</style>
